<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>贵州</title>
</head>
<body>
{#<h1>当前地区</h1>#}
{#{{ area.title }}<br>#}
{#<h1>父地区</h1>#}
{#{{ parent.title }}<br>#}
{#<h1>子地区</h1>#}
{#<ul>#}
{#    {% for child in children %}#}
{#       <li>{{ child }}</li>#}
{#    {% endfor %}#}
{#</ul>#}

<select id='prov'>

    <option>下拉选择省</option>
</select>
<select id='city'>
    <option>下拉选择市</option>
</select>
<select id='dis'>
    <option>下拉选择县</option>
</select>

<script src="/static/js/jquery-3.4.1.js"></script>
<script>
    $(function () {
        $.get('/prov', function (data) {
            res=data.data
            prov=$('#prov')

            for (i = 0; i < res.length; i++) {
                id=res[i][0]
                title=res[i][1]
                str='<option value="'+id+'">'+title+'</option>'
                prov.append(str)
            }
        })

      $('#prov').change(function () {
         provId=$(this).val()
          $.get('/city/'+provId,function (data   ) {
                res=data.data
               city=$('#city')
              city.empty().append('<option>---请选择市---</option>')

              dis=$('#dis')
              dis.empty().append('<option>---请选择区---</option>')

              $.each(res,function (index,item   ) {
                    id=item[0]
                    title=item[1]
                  str='<option value="'+id+'">'+title+'</option>'
                city.append(str)
              })
          })
      })

      $('#city').change(function () {
         cityId=$(this).val()
          $.get('/dis/'+cityId,function (data) {
                res=data.data
                dis=$('#dis')

              dis.empty().append('<option>---请选择区---</option>')

              $.each(res,function (index,item) {
                     id=item[0]
                    title=item[1]
                  str='<option value="'+id+'">'+title+'</option>'
                dis.append(str)
              })
          })
      })



    })
</script>
</body>
</html>